<template>
  <ve-line :data="axisOption" :settings="chartSettings" ref="table"></ve-line>
</template>
<script>
import {
  listBiConfVueSecond,
  getBiConfVueSecond,
  delBiConfVueSecond,
  addBiConfVueSecond,
  updateBiConfVueSecond,
  query,
} from "@/api/vue/BiConfVueSecond";
import axios from "axios";
//--------导入token
import { getToken } from "@/utils/auth";
// import.* as echarts from echarts/lib/echarts.js
// import * as echarts from 'echarts'

// import 'v-charts-v2/lib/line'
import * as echarts from "echarts/lib/echarts.js";
// import * as echarts from "echarts";
export default {
  props: {
    row: {
      type: Object,
      default: () => {},
    },
  },

  data() {
    // :colors="colors"
    // this.colors = ['#03C8D5', '#40A9F5'];
    //
    // this.chartSettings = {
    //     yAxisType: ['0.[00]a', '0.[00]%'],
    //     axisSite: {
    //         right: []
    //         // '下单率'
    //     },
    //     yAxisName: ['数值轴', '比率轴']
    // },
    return {
      // chartOptions: {
      //     series: [{
      //         type: 'line',
      //         // data: [1, 2, 3, 4, 5],
      //         lineStyle: {
      //             color: '#36a3f7'
      //         }
      //     }]
      // },
      chartSettings: {
        dimension: [],
        metrics: [],
        // yAxisType: ["0,0",'0.[00]a', '0.[00]%'],
        yAxisType: ["0.[00]a", "0.[00]%"],
        // axisLabel: {
        //     formatter: function (value) {
        //         return value / 10000 + 'w';
        //     }
        //     // }
        // },
        axisSite: {
          right: [],
          // '下单率'
        },
        // yAxisName: ['数值轴']
        // yAxisName: ["数值轴", "比率轴"],
      },
      axisOption: {
        // columns: ["日期", "访问用户", "下单用户", "下单率"],
        // rows: [
        //   { 日期: "1/1", 访问用户: 1393, 下单用户: 1093, 下单率: 0.32 },
        //   { 日期: "1/2", 访问用户: 3530, 下单用户: 3230, 下单率: 0.26 },
        //   { 日期: "1/3", 访问用户: 2923, 下单用户: 2623, 下单率: 0.76 },
        //   { 日期: "1/4", 访问用户: 1723, 下单用户: 1423, 下单率: 0.49 },
        //   { 日期: "1/5", 访问用户: 3792, 下单用户: 3492, 下单率: 0.323 },
        //   { 日期: "1/6", 访问用户: 4593, 下单用户: 4293, 下单率: 0.78 },
        // ],
      },
      querydata: {
        cols: [
          {
            field_comment: "一级",
            field_name: "first_level_column",
          },
          {
            field_comment: "销售金额",
            field_name: "sales_amount",
          },
          {
            field_comment: "净销售额",
            field_name: "net_sales_amount",
          },
        ],
        tableData: [
          {
            net_sales_amount: 1501889.42,
            first_level_column: "上衣",
            sales_amount: 1647713.1699999997,
          },
          {
            net_sales_amount: 3015002.270000001,
            first_level_column: "下装",
            sales_amount: 3342178.6699999995,
          },
          {
            net_sales_amount: 3815701.0300000007,
            first_level_column: "文胸",
            sales_amount: 4154538.01,
          },
          {
            net_sales_amount: 69069.08000000002,
            first_level_column: "配件",
            sales_amount: 77493.92000000003,
          },
        ],
        unitX: "first_level_column",
      },
    };
  },

  // watch: {
  //   chartData: {
  //     handler: function (newnew, oldold) {
  //       // console.log(JSON.stringify(newnew));
  //       newnew.columns.forEach((item) => {
  //         if (item.includes("率")) {
  //           this.chartSettings.axisSite.right.push(item);
  //           // if (item.includes('连带率')) {
  //           //     this.chartSettings.axisSite.right = []
  //           //     this.axisOption = newnew

  //           // }
  //         } else {
  //           this.chartSettings.axisSite.right = [];
  //           this.axisOption = newnew;
  //           // this.axisOption.columns = this.chartData.columns
  //         }
  //       });

  //       // this.axisOption.rows = this.chartData.rows
  //       // this.initChart()
  //       // this.axisOption = newnew;
  //       // 这里需要让表格重新绘制一下，否则会产生固定列错位的情况
  //       // console.log(new Date());
  //       this.$nextTick(() => {
  //         // this.$refs.table.doLayout();
  //         this.$refs.table.echarts.resize();
  //         // console.log('渲染完成时间', new Date());
  //       });
  //     },
  //     deep: true,
  //     immediate: true,
  //   },
  // },
  watch: {
    row: {
      handler: function (newnew, oldold) {
        console.log("newnew", newnew);
        // let obj = {
        //   id: this.row.id,
        //   sqlId: this.row.sqlId,
        // };

        this.initChart();
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    // this.initChart();
  },
  // row: {
  //   handler: function (newnew, oldold) {
  //     console.log("newnew", newnew);
  //     if (newnew) {
  //       this.initChart(newnew);
  //     }
  //   },
  //   deep: true,
  //   immediate: true,
  // },
  methods: {
    getTagNameComment(tagName) {
      const item = this.querydata.cols.find((col) =>
        col.field_name.includes(tagName)
      );
      return item ? item.field_comment : "";
    },
    initChart() {
      if (!this.row.vueSecondId) {
        return;
      }
      query({ id: this.row.vueSecondId }).then((response) => {
        this.querydata = {};
        this.chartSettings = {
          dimension: [],
          metrics: [],
          axisOption: {},
        };
        this.querydata = response.data;
        // this.axisOption = this.chartData;
        this.chartSettings.dimension.push(
          this.getTagNameComment(this.querydata.unitX)
        );
        // console.log(JSON.stringify());
        if (this.querydata.tableData.length == 0) {
          return;
        }
        let columns = Object.keys(this.querydata.tableData[0]);
        columns.forEach((item) => {
          if (item != this.querydata.unitX) {
            this.chartSettings.metrics.push(this.getTagNameComment(item));
          }
        });
        // console.log(JSON.stringify(this.axisOption.columns));
        //   cols.map(
        //   (item) => item.field_name
        // );
        // 创建一个字段名到中文的映射
        const fieldNameToCommentMap = {};
        this.querydata.cols.forEach((col) => {
          fieldNameToCommentMap[col.field_name] = col.field_comment;
        });

        // 转换tableData中的字段名为中文
        const translatedTableData = this.querydata.tableData.map((item) => {
          const translatedItem = {};
          Object.keys(item).forEach((key) => {
            if (fieldNameToCommentMap[key]) {
              translatedItem[fieldNameToCommentMap[key]] = item[key];
            } else {
              // 如果key不在cols中，则直接保留原字段名
              translatedItem[key] = item[key];
            }
          });
          return translatedItem;
        });
        this.axisOption.rows = translatedTableData;
        this.$nextTick(() => {
          this.$refs.table.echarts.resize();
        });
      });
    },
  },
};
</script>
